<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			<table border="1" cellspacing="0" cellpadding="10px" id="Table">
				<tr>
					<th></th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>家庭住址</th>
				</tr>
				<tr class="trAll">
					<td><input type="checkbox" name="" id="" value="" /></td>
					<td>张三</td>
					<td class="sex">男</td>
					<td>20</td>
					<td>北京</td>
				</tr>
				<tr class="trAll">
					<td><input type="checkbox" name="" id="" value="" /></td>
					<td>李四</td>
					<td class="sex">女</td>
					<td>21</td>
					<td>南京</td>
				</tr>
				<tr class="trAll">
					<td><input type="checkbox" name="" id="" value="" /></td>
					<td>王五</td>
					<td class="sex">男</td>
					<td>25</td>
					<td>上海</td>
				</tr>
				<tr class="trAll">
					<td><input type="checkbox" name="" id="" value="" /></td>
					<td>老六</td>
					<td class="sex">男</td>
					<td>34</td>
					<td>江苏</td>
				</tr>
			</table>
			全选<input type="checkbox" name="" id="checkState" value="" onclick="doAction()"/>
			全选男<input type="checkbox" name="" id="checkState2" value="" onclick="doSelectMan()"/>
			全选女<input type="checkbox" name="" id="checkState3" value="" onclick="doSelectWomen()"/>
			<button type="button" onclick="doStyleChange()">样式改变</button>
			<button type="button" onclick="doStyleChange2()">样式清除</button>
		</form>
	</body>
	<script type="text/javascript">
		function doAction()
		{
			var table = document.getElementById('Table');
			var inputAll = table.getElementsByTagName('input');
			
			var checkState = document.getElementById('checkState').checked;
			for (i = 0; i<inputAll.length; i++) {
				inputAll[i].checked = checkState;
			}
		}
		function doStyleChange()
		{
			var tr = document.getElementsByClassName('trAll');
			var table = document.getElementById('Table');
			var inputAll = table.getElementsByTagName('input');
			
			for (i = 0; i<inputAll.length; i++) {
				if (inputAll[i].checked) {
					tr[i].style.backgroundColor = 'skyblue';
					tr[i].style.color = 'red';
				} 
			}
		}
		function doStyleChange2()
		{
			var tr = document.getElementsByClassName('trAll');
			var table = document.getElementById('Table');
			var inputAll = table.getElementsByTagName('input');
			
			for (i = 0; i<inputAll.length; i++) {
				if (inputAll[i].checked) {
					tr[i].style.backgroundColor = 'white';
					tr[i].style.color = 'black';
				} 
			}
		}
		function doSelectMan()
		{
			var sex = document.getElementsByClassName('sex');
			var table = document.getElementById('Table');
			var inputAll = table.getElementsByTagName('input');
			var checkState2 = document.getElementById('checkState2').checked;
			
			for (i = 0; i<inputAll.length; i++) {
				if (sex[i].innerText == '男') {
					inputAll[i].checked = checkState2;
				} 
			}
		}
		function doSelectWomen()
		{
			var sex = document.getElementsByClassName('sex');
			var table = document.getElementById('Table');
			var inputAll = table.getElementsByTagName('input');
			var checkState3 = document.getElementById('checkState3').checked;
			
			for (i = 0; i<inputAll.length; i++) {
				if (sex[i].innerText == '女') {
					inputAll[i].checked = checkState3;
				} 
			}
		}
	</script>
</html>
